<template>
	<view class="zh-invoice">
		<view class="pt-200" v-if="invoiceData.total === 0">
			<empty-data :imgSrc="IMG_URL + '/status/no_list.png'"></empty-data>
		</view>
		<view class="list" v-if="invoiceData.total > 0">
			<view class="section display-flex justify-between" v-for="item in invoiceData.list" :key="item.id" @click="select(item)">
				<view class="left">
					<view class="top">
						<text class="title">{{ item.invoicetitle }}</text>
						<text class="tag" v-if="item.isdefault == InvoiceIsdefault.yes">默认</text>
					</view>
					<view class="bottom">
						<view class="item">
							<text class="name">税号:</text>
							<text class="des">{{ item.taxnumber }}</text>
						</view>
						<view class="item">
							<text class="name">开户银行:</text>
							<text class="des">{{ item.bankname }}</text>
						</view>
						<view class="item">
							<text class="name">银行账号:</text>
							<text class="des">{{ item.bankaccount }}</text>
						</view>
						<view class="item">
							<text class="name">联系电话:</text>
							<text class="des">{{ item.contactphone }}</text>
						</view>
						<view class="item">
							<text class="name">开票地址:</text>
							<text class="des">{{ item.invoicingaddress }}</text>
						</view>
					</view>
				</view>
				<view class="right display-flex flex-direction-column justify-between">
					<image src="@/static/icons/edit_icon.png" class="edit-icon" @click.stop="navigateTo('/pages/userCenter/invoice/add?info=' + util.setObjParams(item))"/>
					<image src="@/static/icons/delete_icon.png" class="delete-icon"  @click.stop="delInvoice(item.id)"/>
				</view>
			</view>
			<view class="load-more">
				<u-load-more  ref="loadMoreRef"></u-load-more>
			</view>
		</view>
		<view class="bottom-fixed">
			<button class="app-primary-button" hover-class="app-primary-button-active" @click="navigateTo('/pages/userCenter/invoice/add')">新增开票抬头</button>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { reactive, ref } from 'vue'
	import { invoice } from '@/api'
	import { tip, util } from '@/utils'
	import type { InvoiceData } from '@/@type/invoice'
	import { InvoiceIsdefault, InvoiceStatus } from '@/enum/invoice'
	import { onLoad, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
	import { useAuthStore } from '@/store/auth'
	import emptyData from '@/pages/components/empty-data'
	
	import { IMG_URL } from '@/utils/constant'
	const loadMoreRef = ref()
	const type = ref('')
	const authStore = useAuthStore()
	const user = authStore.getUser()
	const invoiceData: any = reactive({
		query:{
			status: InvoiceStatus.enable,
			shopid: user.shopId,
			shopName:user.shopName,
			noLoading:false
		},
		params:{
			pageNum:1,
			pageSize:10,
			reasonable:false,
		},
		delParams: {
			id:"",
			status: InvoiceStatus.disable
		},
		list:[],
		total:''
	})

	onLoad((options) => {
		type.value = options.type?options.type:''
		inoviceList()
	})
	
	uni.$on('invoiceAdd', (res:any) => {
		refresh()
	})

	const inoviceList = (cb?:Function) => {
		invoice.getInvoiceList(invoiceData.query, invoiceData.params).then((res:any) => {
			cb && cb()
			invoiceData.list = [...invoiceData.list,...res.rows],
			invoiceData.total = res.total
		})
	}
	
	const delInvoice = (id: string) => {
		tip.confirm('是否删除该发票抬头').then(() => {
			invoiceData.delParams.id = id
			invoice.setInvoiceDel(invoiceData.delParams).then((res: any) => {
				tip.showToast('删除成功！')
				refresh()
			})
		})
	}
	
	const select = (item: any) => {
		if(!type.value) return
		const obj = {
			invoiceTitle:item.invoicetitle,
			id:item.id,
			type:'invoice'
		}
		uni.$emit(type.value, obj)
		uni.navigateBack({
			delta: 1
		})
	}

	onReachBottom(() => {
		if(invoiceData.params.pageNum * invoiceData.params.pageSize > invoiceData.total) return loadMoreRef.value.changeStatusNoMore()
		invoiceData.params.pageNum++
		loadMoreRef.value.changeStatusLoading()
		setTimeout(() => {
			invoiceData.query.noLoading = true
			inoviceList(() => {
				loadMoreRef.value.changeStatusNoLoading()
				if(invoiceData.params.pageNum * invoiceData.params.pageSize > invoiceData.total) return loadMoreRef.value.changeStatusNoMore()
			})
		}, 300)
	})

	onPullDownRefresh(() => {
		refresh()
		setTimeout(function () {
			uni.stopPullDownRefresh()
		}, 1000)
	})
		
	const refresh = () => {
		invoiceData.query.noLoading = false
		if(loadMoreRef.value) loadMoreRef.value.changeStatusNoLoading()
		invoiceData.params.pageNum = 1
		invoiceData.list = []
		inoviceList()
	}

	const navigateTo = (url:string) => {
		uni.navigateTo({url:url})
	}

</script>

<style lang="scss" scoped>
	.zh-invoice {
		.list {
			padding:20rpx 0 130rpx;
			.section {
				padding:40rpx 30rpx;
				background-color: $uni-bg-card-color;
				.left {
					.top {
						margin-bottom:8rpx;
						.title {
							font-size: 30rpx;
							color:#302D2D;
							font-weight: bold;
						}
						.tag {
							display:inline-block;
							width:57rpx;
							height: 30rpx;
							line-height: 30rpx;
							border-radius: 6rpx;
							border:1rpx solid $uni-color-primary;
							font-size: 20rpx;
							text-align:center;
							margin-left: 20rpx;
							color:$uni-color-primary;
						}
					}
					.bottom {
						margin-top: 20rpx;
						.name {
							display: inline-block;
							width:116rpx;
							font-size: 26rpx;
							color:$uni-text-color-grey;
						}
						.des {
							font-size: 26rpx;
							color:$uni-text-color-light-black;
							margin-left: 27rpx;
						}
					}
				}
				.right {
					.edit-icon {
						width: 31rpx;
						height: 29rpx;
					}
					.delete-icon {
						width: 25rpx;
						height:28rpx;
					}
				}
			}
		}
	}
</style>
